<script lang="ts" setup>
import Driver from '@/components/Driver/index.vue'
import MainCenter from '@/layout/MainCenter/index.vue'
import ArticleItem from '@/components/ArticleItem/index.vue'
import Footer from '@/components/Footer/index.vue'
import { useRouter } from 'vue-router'
import { getArticleList,getArticleCateConfig } from '@/api/home'
import { getHotArticle } from '@/api/article'
import { getAllTags } from '@/api/tag'
import { nextTick, reactive, ref,computed, onMounted, inject } from 'vue'
import { message } from 'ant-design-vue'
import { LikeOutlined, ClockCircleOutlined } from '@ant-design/icons-vue'
import { encryData } from '@/utils/utils'
import moment from 'moment'
import {getPoetry} from '@/api/utils';
import { positiveStatements } from './mockDanmu'
import '@/assets/css/zplayer.min.css'
// import {zplayer} from  '@/utils/zplayer.min.js'
import { musicList } from '@/utils/musicData'
let custromUserInfo = inject("custromUserInfo")


// 引入评论
// @ts-ignore
import Valine from 'valine/index';
/* 引入弹幕 */
import vueDanmaku from 'vue3-danmaku'

const danmus = ref(positiveStatements)
let danmakuRef = ref(null)

// let playerMusic = ref(null)
// let playerRef = ref(null)
/* 评论配置 */
onMounted(() => {
    new Valine({
        el:'#vcomments',
        appId: '2KZ3d5BiBVh0hBlXCWUzDJ1A-gzGzoHsz',
        appKey: 'zqQKAEXucwv0OG9EckCrwP6E',
        placeholder: "你是我一生只会遇见一次的惊喜 ...",
        master:'5e9ffb05b3f5e9c13a764515f1b6b5b8',
        tagMeta:["博主","小伙伴","访客"],
        avatar: 'monsterid',
        enableQQ: true,
        path:  'index',
    })
    /* 创建右侧播放器 */
    // playerMusic.value =  new zplayer({
	// 			element: document.getElementById('player1'),
	// 			lrcStart: 1,/*是否开启歌词功能 ，默认false（为true时musics集合中需要传入lrc字段。）*/
	// 			musics: musicList,
	// 		})
})

const router = useRouter()

interface articleListConfig {
    page: number,
    pageSize: number,
    count: number
}
let isLoading = ref<Boolean>(false)

const articleList = ref([]) // 文章列表
const requestArticleListConfig = reactive<articleListConfig>({
    page: 1,
    pageSize: 10,
    count: 0, // 文章总量
})

interface tagItem {
    tagId: number,
    tagName: string,
    tagAlias?: string,
    tagDesc?: string
}
const tags = ref<tagItem[]>([])

const requestTags = async () => {
    try {
        let res: any = await getAllTags()
        if (res.code !== 200) {
            message.error(res.message)
            return
        }
        tags.value = res.tags
    } catch (e: any) {
        message.error(e.message)
    }
}

interface  mainFast {
  articleCount:number,
  cateCount:number,
  tagCount:number
}

let mainFastConfig = reactive<mainFast>({
  articleCount:0,
  cateCount:0,
  tagCount:0
})
let requestMainFastConfig = async () => {
  try {
    let data:any = await  getArticleCateConfig()
    if(data.code == 200) {
      mainFastConfig.articleCount = data.articleCount
      mainFastConfig.cateCount = data.cateCount
      mainFastConfig.tagCount = data.tagCount
      return
    }else {
      /*失败之后的文件*/
    }
  }catch (e:any) {
    message.error(e.message)
  }
}


requestTags()
requestMainFastConfig()


let mainLeftDom = ref<null | HTMLElement>(null)
let isFirst = true
const getArticleListData = async () => {
    try {
        isLoading.value = true
        const data: any = await getArticleList(requestArticleListConfig.page, requestArticleListConfig.pageSize)
        isLoading.value = false
        if (data.code === 200) {
            data.articles.map((item: any) => {
                item.articleCover = item.articleCover
                item["publicTime"] = moment(item.publicTime).format('YYYY-MM-DD HH:mm:ss')
            })
            requestArticleListConfig.count = data.count
            articleList.value = data.articles
            if (hotList.value.length === 0) {
                requestHotList()
            }
            if (!isFirst) {
                nextTick(() => {
                    let height = mainLeftDom.value?.$el?.clientHeight * 1
                    window.scrollTo({ top: height, behavior: 'smooth' })
                })
            }
            isFirst = false
        } else {

        }
    } catch (e: any) {
        isLoading.value = false
        message.error(e.message)
    }
}
getArticleListData()

// 页码变化处理函数
let pageChangeHandler = (page: number, pageSize: number) => {
    requestArticleListConfig.page = page
    getArticleListData()
}

let errorImg = require('@/assets/images/error.jpg')


interface imgPreviewInterFace {
    isShow: Boolean,
    currentPath: string,
    imgList?: Array<string>,
    onVisibleChange: Function,
    onError: Function
}

let imgPreviewConfig = reactive<imgPreviewInterFace>({
    isShow: false,
    imgList: [],
    currentPath: '',
    // 当前显示状态改变处理函数
    onVisibleChange: () => {
        imgPreviewConfig.isShow = !imgPreviewConfig.isShow
    },
    // 加载错误
    onError() {
        imgPreviewConfig.currentPath = errorImg
    }
})
/* 图片预览处理函数 */
let prievewImgHandler = (article: Object) => {
    imgPreviewConfig.isShow = true
    imgPreviewConfig.currentPath = article.articleCover
}

// 跳转
let detailHandler = (article: Object) => {
    let articleId = encryData(article.articleId)
    router.push({ name: 'Detail', params: { articleId } })
}

/* 获取最新文章 */
let hotList = ref([])
let requestHotList = async () => {
    try {
        let res: any = await getHotArticle()

        if (res.code === 200) {
            res.hostList.forEach((item: any) => {
                item.publicTime = moment(item.publicTime).format('YYYY-MM-DD hh:mm:ss')
            })
            hotList.value = res.hostList
        }
    } catch (err: any) {
        message.error(err.message)
    }
}

/*点击条转主页*/
let switchHandler = (link:string) => {
  let dom = document.createElement('a')
  dom.href = link
  dom.target = '_blank'
  dom.click()
}

/* 点击tag跳转 */
let tagClickHandler = (tag:{tagId:number,tagName:string}) => {
    router.push({ name: 'Tag', query: { tagId: encryData(tag.tagId) } })
}


/* 获取古诗词 */
let poetryConfig = reactive<{
    name:string,
    sentence:string,
    author:string
}>({
    author:'',
    sentence:'',
    name:''
})
let requestPoetry = async () => {
    let data:any = await getPoetry()
    console.log(data);
    if(data.code ==0) {
        poetryConfig.name = "《" + data.data.name + "》"
        poetryConfig.sentence = data.data.sentence.split('。')
        poetryConfig.author = data.data.author
    }
}
requestPoetry()

const previewCode = ($event) => {
    imgPreviewConfig.isShow = true
    imgPreviewConfig.currentPath = $event.target.currentSrc
}

</script>

<template>
    <div class="home-container">
        <a-row ref="mainLeftDom" class="home-img">
        
            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24" class="home-bg">
            <vue-danmaku
                v-if="custromUserInfo.showDanMu"
                :isSuspend="false"
                :speeds="150"
                :top="30"
                style="width: 100%;height: 100%;"
                ref="danmakuRef" v-model:danmus="danmus" useSlot :loop="false" :channels="2">
                <template v-slot:dm="{ index, danmu }">
                    <div class="dm-item-i">
                        <div class="left">
                            <img :src="danmu.avatar" alt="" srcset="">
                        </div>
                        <div class="right">
                            <span class="right-name"></span>
                            <span class="right-content">{{ danmu.text }}</span>
                        </div>
                    </div>
                </template>
            </vue-danmaku>
                <div class="home-img-title">
                    <div class="poetry-box">
                        <h4 class="poetry-title">{{ poetryConfig.author }}{{  poetryConfig.name  }}</h4>
                        <p v-for="item in poetryConfig.sentence" :key="item">
                            {{ item }}
                        </p>
                    </div>
                    <!-- <h2>无人做你的光芒就自己照亮前方</h2> -->
               </div>
            </a-col>
        </a-row>
        <!-- 主题布局 -->
        <MainCenter>
            <a-row class="main">
                <a-col class="main-left" :xs="24" :sm="24" :md="24" :lg="24" :xl="16" :xxl="16">
                   <div class="bg-box">
                    <Driver title="文章列表"></Driver>
                    <div v-if="articleList.length == 0 || isLoading">
                        <a-skeleton style="padding: 0px 15px;"
                            v-for="item in Math.round(requestArticleListConfig.pageSize / 2)" active>
                        </a-skeleton>
                    </div>
                    <a-timeline v-else class="time-line-cus">
                        <ArticleItem v-for="(article, key) in articleList" :key="article.articleId" :article="article"
                            @titleClicke="detailHandler" @clickImage="prievewImgHandler"></ArticleItem>
                    </a-timeline>
                    <a-pagination class="l-pagination" @change="pageChangeHandler"
                        v-model:pageSize="requestArticleListConfig.pageSize" v-model:current="requestArticleListConfig.page"
                        :showSizeChanger="false" :total="requestArticleListConfig.count" show-less-items />
                   </div>
                        <!-- 评论区 -->
                    <div id="vcomments" class="luox-comment-box"></div>
                </a-col>
                <a-col class="main-right" :xs="24" :sm="24" :md="24" :lg="24" :xl="8" :xxl="8">
                    <!-- 用户 -->
                    <div class="right-box user-box">
                        <div class="user-head">
                            <img class="user-avater"
                                :src="custromUserInfo.avatar"
                                alt="" srcset="">
                            <p class="user-name">
                                {{ custromUserInfo.userName }}
                                <a-tag color="blue"></a-tag>
                            <p class="signature">{{ custromUserInfo.desc }}</p>
                            </p>
                        </div>
                        <div class="info">
                            <div class="item">
                                <div class="top">
                                  <count-to :startVal="0" :endVal="mainFastConfig.articleCount" autoplay="true" :duration="1500"></count-to>
                                </div>
                                <div class="bottom">
                                    文章数量
                                </div>
                            </div>
                            <div class="item">
                                <div class="top">
                                    <count-to :startVal="0" :endVal="mainFastConfig.cateCount" autoplay="true" :duration="1500"></count-to>
                                </div>
                                <div class="bottom">
                                    分类数量
                                </div>
                            </div>
                            <div class="item">
                                <div class="top">
                                  <count-to :startVal="0" :endVal="mainFastConfig.tagCount" autoplay="true" :duration="1500"></count-to>
                                </div>
                                <div class="bottom">
                                    标签数量
                                </div>
                            </div>
                        </div>
                        <!-- 友情链接 -->
                        <div class="link">
                            <div class="link-icon">
                                <i class="iconfont icon-GitHub" @click="switchHandler('https://github.com/luozhihao99')"></i>
                            </div>
                            <div class="link-icon">
                                <i class="iconfont icon-gitee" style="font-size: 26px;" @click="switchHandler('https://gitee.com/whriten')"></i>
                            </div>
                        </div>
                    </div>
                    <!-- 广告 -->
                    <div class="right-box my-code-box">
                        <div class="left">
                            <p>扫码添加作者</p>
                            <p>加入您的兴趣圈子</p>
                        </div>
                        <div class="right">
                            <img class="my-qr-code"
                                src="@/assets/images/wx-qr-code.png"
                                alt="" srcset=""
                                @click="previewCode"
                                >
                        </div>
                    </div>
                    <!-- 热门文章 -->
                    <div class="right-box host-article-box">
                        <div class="heade">
                            <h1 class="host-article-title">热门文章</h1>
                            <a @click="router.push('/tag')">更多</a>
                        </div>
                        <div class="host-article-list">
                            <div @click="detailHandler(item)" class="host-article-item" v-for="(item) in hotList" :key="item.articleId">
                                <h4 class="host-article-item-title clap-ellipsis">
                                    {{ item.articleTitle }}
                                </h4>
                                <p class="host-article-item-view-count">
                                    <span>
                                        <LikeOutlined></LikeOutlined>
                                        {{ item.likeCount }}
                                    </span>
                                    <span style="margin-left: 15px;" class="host-article-public">
                                        <ClockCircleOutlined></ClockCircleOutlined> {{ item.publicTime }}
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="right-box host-article-box"> -->
                        <!-- <div ref="playerRef" class="music-player" id="player1"></div> -->
                    <!-- </div> -->
                    <!-- 标签 -->
                    <div class="right-box tag-box">
                        <div class="heade">
                            <h1 class="host-article-title">全部标签</h1>
                        </div>
                        <div class="tags">
                            <span class="tag-item" @click="tagClickHandler(tag)" v-for="tag in tags" :key="tag.tagId">
                                {{ tag.tagName }}
                            </span>
                        </div>
                    </div>
                </a-col>
            </a-row>
        </MainCenter>
        <!-- 图片预览 -->
        <a-image :width="200" :style="{ display: 'none' }" :preview="{
            visible: imgPreviewConfig.isShow,
            onVisibleChange: imgPreviewConfig.onVisibleChange,
        }" @error="imgPreviewConfig.onError" :src="imgPreviewConfig.currentPath" />
        <!-- 底部栏目 -->
        <Footer></Footer>
    </div>
</template>

<style lang="scss" scoped>
.home-container {
    .home-img {
        position: relative;
        width: 100%;
        // height: 25vh;
        height: 100vh;
        background: url("https://img.paulzzh.com/touhou/random") no-repeat;
        background-size: cover;
        background-position: center;
        &:hover::after {
                backdrop-filter: blur(10px);
            }
        &::after{
            content: "";
            width: 100%;
            height: 100%;
            background-image: linear-gradient(78deg, #0000008c, transparent);
            transition: .3s all;
            position: absolute;
            left: 0px;
            top: 0px;
        }
        .home-img-title {
            // background: #fff;；
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 33;
            color: #fff;
            h2 {
                font-family: '阿里妈妈';
                font-size: 1.8rem;
                font-weight: 700;
                letter-spacing: 6px;
                background: -webkit-linear-gradient(left, rgb(255, 255, 255), rgb(255, 255, 255)) 0 0 no-repeat;/*设置线性渐变*/
                -webkit-background-size: 50px;                        /*设置背景大小*/
                -webkit-background-clip: text;                            /*背景被裁剪到文字*/
                -webkit-text-fill-color: rgba(255, 255, 255, 0.3);        /*设置文字的填充颜色*/
                animation: shine 5s infinite;
                transition: 1s all;              /*设置动画*/
            }
            &:hover {
                h2 {
                    -webkit-transform:rotateX(20deg) rotateY(20deg);
                }
            }
            .poetry-box {
                font-family:"楷体";
                margin:10px auto;
                padding:30px;
                font-size: 1.5rem;
                -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
                text-align: center;
                .poetry-title {
                    font-size: 1.6rem;
                    margin-bottom: 1.5rem;
                }
                p {
                    animation: shine 5s infinite;
                    transition: .3s all;
                    font-size: 1.5rem;
                    background: -webkit-linear-gradient(left, rgb(255, 255, 255), rgb(255, 255, 255)) 0 0 no-repeat;/*设置线性渐变*/
                    -webkit-background-size: 50px;                        /*设置背景大小*/
                    -webkit-background-clip: text;                            /*背景被裁剪到文字*/
                    -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
                    &:hover {
                        -webkit-text-fill-color: rgba(255, 255, 255,);
                    }
                }
            }
        }
        @-webkit-keyframes shine{   /*创建动画*/
		    0%{
		        background-position: 0 0;
		    }
		    100%{
		        background-position: 100% 100%;
		    }
		}
        @keyframes shine{   /*创建动画*/
		    0%{
		        background-position: 0 0;
		    }
		    100%{
		        background-position: 100% 100%;
		    }
		}
    }
  ::v-deep #veditor {
    background-image: url(https://cdn.jsdelivr.net/gh/drew233/cdn/20200409110727.webp); /* 修改自己喜欢的图片链接即可 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-color: rgba(255, 255, 255, 0);
    resize: vertical
  }

  /* 防止图片遮住输入框文字 */
  ::v-deep #veditor:focus{
    background-position-y: 200px;
    transition: all 0.2s ease-in-out 0s;
  }

    ::v-deep .home-content {
        background: #f2f3f5;
        padding-bottom: 2rem;

        .home-main {
            .main {
                padding-top: 1.5rem;
                width: 100%;

                .main-left {
                    height: max-content;
                    .bg-box {
                        padding-top: 1.5rem;
                        background-color: #fff;
                    }

                    .time-line-cus {}

                    .l-pagination {
                        padding: 15px 0px;
                        text-align: center;

                        ::v-deep .ant-pagination-item {
                            border-radius: 0px;
                        }
                    }
                }

                .main-right {
                    // position: sticky;
                    // top: calc(1.5rem + 56px);
                    // height: max-content;
                    padding: 0px 1.5rem;

                    .right-box {
                    //     position: sticky;
                    // top: calc(1.5rem + 56px);
                        padding: 15px 20px;
                        background: #fff;
                        margin-bottom: 1.5rem;
                    }

                    .user-head {
                        display: flex;
                        align-items: center;

                        .user-avater {
                            width: 50px;
                            height: 50px;
                            border-radius: 100%;
                        }

                        .user-name {
                            margin: 0px 10px;
                            flex: 1;
                            text-overflow: ellipsis;

                            p {
                                margin: 0;
                            }

                            .signature {
                                margin-top: 5px;
                                color: #999;
                                font-weight: 300;
                                font-size: 12px;
                            }
                        }
                    }

                    .info {
                        padding: 15px 0px;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .item {
                            text-align: center;
                            flex: 1;

                            .top {
                                font-size: 18px;
                                color: #000;
                                font-weight: 100;
                            }

                            .bottom {
                                padding-top: 8px;
                                font-weight: 100;
                                color: #999;
                            }
                        }
                    }

                    .link {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 15px 0px;

                        .link-icon {
                            cursor: pointer;
                            transition: .3s all;
                            flex: 1;
                            text-align: center;
                        }

                        .link-icon:nth-child(2) {
                            color: rgb(171, 33, 33);
                        }

                        .link-icon:nth-child(1):hover {
                            color: green;
                        }

                        .link-icon:nth-child(2):hover {
                            color: rgb(203, 14, 14);
                        }
                    }

                    .my-code-box {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 5px 10px;

                        .left {
                            p {
                                margin: 0px;
                                font-weight: 200;
                            }

                            p:nth-child(1) {
                                font-size: 14px;
                                margin-bottom: 15px;
                            }

                            p:nth-child(2) {
                                font-size: 14px;
                                color: #8a919f;
                            }
                        }

                        .right {
                            .my-qr-code {
                                width: 80px;
                                height: 80px;
                                object-fit: cover;
                            }
                        }
                    }

                    .host-article-box {
                        padding-left: 5px;
                        padding-right: 5px;

                        .heade {
                            padding: 0px 5px;
                            display: flex;
                            justify-content: space-between;
                            border-bottom: 1px solid #2424241e;

                            .host-article-title {
                                font-size: 14px;
                            }
                        }

                        .host-article-item {
                            cursor: pointer;
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            padding: 10px 10px;

                            .host-article-item-title {
                                white-space: pre-wrap;
                                word-break: break-all;
                                -webkit-line-clamp: 2;
                                font-weight: 500;
                                font-size: 14px;
                                color: #000;
                                transition: .3s all;
                                margin-bottom: 10px;
                            }

                            .host-article-item-view-count {
                                margin: 0px;

                                span {
                                    font-weight: 400;
                                    font-size: 13px;
                                    color: #8a919f;
                                }
                            }

                            &:hover {
                                background: rgba(21, 21, 21, 0.025);
                            }

                            &:first-child {
                                margin-top: 15px;
                            }
                        }
                    }

                    .tag-box {
                        padding: 10px;

                        .heade {
                            margin: 0px;

                            h1 {
                                font-size: 14px;
                            }
                        }

                        .tags {
                            margin-top: 10px;
                            display: flex;
                            flex-wrap: wrap;

                            .tag-item {
                                font-weight: 400;
                                cursor: pointer;
                                padding: 10px;
                                color: #8a919f;
                                transition: .3s all;

                                &:hover {
                                    border-radius: 5px;
                                    color: #000;
                                    // background: rgba(21, 21, 21, 0.05);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* 弹幕 */
::v-deep .vue-danmaku .danmus {
    z-index: 6;
    margin-top: var(--luox-header-height);
    height: calc(100% - var(--luox-header-height));
    .dm-item-i {
        display: flex;
        align-items: center;
        background-color: rgba(0,0,0,.8);
        padding: 6px 8px;
        border-radius: 32px;
        .left {
            width: 30px;
            height: 30px;
            object-fit: cover;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 5px;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}


/* 留言 */
.luox-comment-box {
    margin: 1.5rem 0px;
    padding: 1.5rem 1.5rem;
    background-color: #fff;
}


/* 播放器 */
::v-deep .music-player .zplayer {
    .zplayer-content {
        border: none;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom: 10px;
    }
    .zplayer-music {
        text-align: center;
    }
    .zplayer-pic {
        animation: turn 10s linear infinite;
        position: relative;
        border: none;
        border-radius: 50%;
        img {
            border-radius: 50%;
            object-fit: cover;
        }
    }
    .zplayer-info {
        width: 95%;
        margin-left: 0px;
    }
    .zplayer-list {
        // padding: 15px 0px;
        border: none;
        border-top: 1px solid #dedede;
        border: 1px solid #dedede;
    }
}
.turn {
    animation: turn 10s linear infinite;
}
@keyframes turn {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(72deg);
    }

    40% {
        transform: rotate(144deg);
    }

    60% {
        transform: rotate(216deg);
    }

    80% {
        transform: rotate(288deg);
    }

    100% {
        transform: rotate(360deg);
    }
}



// xs
::v-deep {
@media screen and (max-width: 480px) {
    .home-content .home-main .main {
        padding-top: 0px !important;
    }
    .main-right {
        margin-top: 1.5rem;
    }
}


// sm
@media screen and (max-width: 576px) {
    .home-content .home-main .main {
        padding-top: 0px !important;
    }
    .main-right {
        margin-top: 1.5rem;
    }
 }
}







</style>
